<template>
	<div class="login">
		<!--  -->
		<div id="bg">
			<div class="bg-div">
				<table cellspacing="0" cellpadding="0" class="login-bg-table">
					<tr>
						<td class="login-bg-td">
							<img class="login-bg" src="@/assets/img/bg.png" alt="" />
							<!-- 登录区域 -->
							<div class="login-container">
								<div class="login-form">
									<div class="login-left">
										<img class="login-left-img" src="../assets/img/banner.png" />
									</div>
									<div class="login-right">
										<div class="login-form-item form-title">
											<img class="logo" src="@/assets/img/elove_logo.png" alt="">
											<div class="logo-e-love">E-LOVE中台 登录</div>
										</div>
										<!-- 地区 -->
										<div class="login-form-item form-region">
											<label for="" class="region-label">地区</label>
											<select class="region-select" name="" id="">
												<option value="mainland">中国大陆</option>
												<option value="hongkong">中国香港</option>
												<option value="international">国际</option>
											</select>
											<img src="../assets/img/down_gray.png" alt="arrow" class="arrow-bottom">
										</div>
										<!-- 用户名 -->
										<div class="login-form-item form-user">
											<label class="username-icon" for="username">
												<img src="../assets/img/loading_user.png" alt="loading_user">
											</label>
											<input type="text" v-model.trim="formLogin.loginName" id="username" placeholder="请输入用户名">
										</div>
										<!-- 密码 -->
										<div class="login-form-item form-pass">
											<label class="pass-icon" for="password">
												<img src="../assets/img/loading_lock.png" alt="loading_lock">
											</label>
											<input type="password" id="password" v-model.trim="formLogin.password" placeholder="请输入密码">
										</div>
										<!-- 验证码 -->
										<div class="login-form-item form-vcode">
											<div class="vcode_cont"><input type="text" id="vcode" v-model.trim="formLogin.validationCode" placeholder="请输入验证码" @keyup.enter="onSubmit" ></div>
											<div class="vcode-img-cont"><img class="vcode-img" id="vcode-img" :src="codeJpgUrl" alt="vcode" @click="refreshUrl"></div>
											<span class="refresh" @click="refreshUrl">刷新</span>
										</div>
										<!-- 记住密码 -->
										<div class="form-remember-pass">
											<!-- <input type="checkbox"  > -->
											<el-checkbox v-model="isRemember" label="记住密码" name="type" class="remember-pass-check" id="remember-pass"></el-checkbox>
											<!-- <label for="remember-pass" class="remember-pass-label">记住密码</label> -->
										</div>
										<!-- 登录 -->
										<div class="form-login-btn" @click="onSubmit()" v-loading.fullscreen.lock="fullscreenLoading">
											登录
										</div>
									</div>
									<div class="login-logo"></div>
									</div>
								<!-- copyright -->
								<div class="copyright-msg">©2018戴瑞珠宝有限公司版权所有 粤ICP备07033766号</div>
							</div>
						</td>
					</tr>
				</table>
			</div>
		</div>
	</div>
</template>
<script>
	import md5 from 'js-md5';
	import axios from 'axios'
	import {
		DRcookie
	} from '../assets/js/common.js'
	export default {
		name: 'login',
		data() {
			return {
				/* 
				login页面中cookie说明
					re  是否记住密码
					lg  用户名
					pw  用户密码
				 
				 */
				formLogin: {
					region: 'mainland',
					loginName: '',
					password: '',
					validationCode: '',
					rememberPass: true
				},
				fullscreenLoading: false,
				codeJpgUrl: '',
				isRemember: false,
				previousPage: ''
			}
		},
		computed: {
			lang() {
				return this.$t('lang')
			},
			hi() {
				return this.$t('hello')
			},
			author() {
				return this.$t('author')
			}
		},
		mounted() {
			this.refreshUrl();
			this.checkRemember();
		},
		methods: {
			checkRemember() {
				const re = DRcookie.get('re') === 'true' ? true : false;
				const lg = DRcookie.get('lg');
				const pw = DRcookie.get('pw');
				if (re && lg && pw) {
					this.isRemember = re;
					this.formLogin.loginName = lg;
					this.formLogin.password = pw;
				}
			},
			refreshUrl() {
				this.codeJpgUrl = `${api.base}/getValidationCodeJPG?t=${Date.parse(new Date())}`
				// this.codeJpgUrl = `api/base/getValidationCodeJPG?t=${Date.parse(new Date())}`
			},
			toHome() {
				// this.$route.query.sign != undefined ? this.$router.go(-1) : this.$router.replace({name: 'crm'})
				this.$router.replace({name: 'crm'})
			},
			onSubmit() {
				// this.toHome();
				const login = this.formLogin;
				if (!login.password) {return};
				if (!login.loginName) {return};
				if (!login.validationCode) {return};
				const param = {
					loginName: login.loginName,
					password: login.password.length === 32 ? login.password : md5(login.password),
					validationCode: login.validationCode,
				}
				this.fullscreenLoading = true;
				const apiTest = this.apiTest;
				this.$ajax({
					// url: `api/base/login`,
					url: `${api.base}/login`,
					method: 'POST',
					data: param,
					headers: {
						"Content-Type": 'application/json',
						'Accept': 'application/json'
					},
					withCredentials: true
				}).then(result => {
					const data = result.data;
					if (data.status == 200) {
						if (this.isRemember) {
							DRcookie.set('lg', login.loginName, 1);
							DRcookie.set('pw', md5(login.password), 1);
							DRcookie.set('re', this.isRemember, 1);
						}
						const result = data.result;
						localStorage.setItem('menuInfoList', JSON.stringify(result.menuInfoList))
						for (let i in result) {
							switch (i) {
								case 'token':
									const arr = result[i].split(' '); //token有空格,要去除再存
									DRcookie.set(`tH`, arr[0], 1);
									DRcookie.set(`tF`, arr[1], 1);
									break;
								default:
									if(typeof result[i] !== 'string') {
										DRcookie.set(i, JSON.stringify(result[i]), 1);
									}else {
										DRcookie.set(i, result[i], 1);
									}
									break;
							}
						}
						this.toHome();
						this.fullscreenLoading = false;
					} else {
						this.refreshUrl();
						this.$message.error(data.msg);
						this.fullscreenLoading = false;
						return;
					}
					console.log(data);
				}).catch(err => {
					this.refreshUrl();
					this.fullscreenLoading = false;
				})
			},
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.login {
		/* min-width: 1200px; */
		width: 100%;
		height: 100%;
		margin: 0 auto;
		/* background: url('../assets/img/bg.png') no-repeat; */
		background-size: 100% auto;
		position: relative;
	}

	#bg {
		width: 100%;
		height: 100%;
		position: fixed;
	}

	#bg .login-bg-table {
		width: 100%;
		height: 100%;
	}

	#bg .bg-div {
		height: 200%;
		left: -50%;
		position: absolute;
		top: -50%;
		width: 200%;
	}

	#bg .login-bg-td {
		width: 100%;
		height: 100%;
		text-align: center;
		vertical-align: middle;
		/* position: relative; */
	}

	#bg .login-bg {
		margin: 0 auto;
		min-height: 50%;
		min-width: 50%;
	}

	/* 登录区域 */
	.login-container {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.login-form {
		display: flex;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		background: #fff;
	}

	.login-left-img {
		display: block;
		width: 100%;
		height: 100%;
	}

	.login-form-item {
		height: 40px;
		display: flex;
		align-items: center;
	}

	.form-title {
		margin-top: 40px;
	}

	.form-title .logo {
		width: 40px;
		height: 40px;
		display: block;
		box-sizing: border-box;
		margin-left: 56px;
		border-radius: 4px;
	}

	.logo-e-love {
		/* font-family: PingFang-SC-Heavy; */
		font-size: 24px;
		color: #7e6b5a;
		padding-left: 10px;
	}

	.form-region {
		margin-top: 32px;
		margin-left: 56px;
		width: 200px;
		box-shadow: 0px 1px 0px 0px #cccccc;
	}

	.form-region .region-label {
		font-family: PingFang-SC-Regular;
		font-size: 14px;
		color: #888888;
		display: block;
		margin-left: 9px;
	}

	.region-select {
		font-family: "Microsoft YaHei","微软雅黑","Microsoft JhengHei","华文细黑",STHeiti,MingLiu,'Avenir', Helvetica, Arial, sans-serif;
		color: #222222;
		font-size: 14px;
		width: 118px;
		margin-left: 20px;
		border: none;
		outline: none;
		white-space: nowrap;
		appearance: none;
		-moz-appearance: none;
		-webkit-appearance: none;
	}

	.region-select::-ms-expand {
		display: none;
	}

	.arrow-bottom {
		width: 10px;
		height: 6px;
		display: block;
	}

	.form-user,
	.form-pass {
		width: 296px;
		margin-left: 56px;
		margin-top: 16px;
		box-shadow: 0px 1px 0px 0px #cccccc;
		display: flex;
		align-items: center;
	}

	.form-user #username,
	.form-pass #password {
		border: none;
		outline: none;
		white-space: nowrap;
		appearance: none;
		-moz-appearance: none;
		-webkit-appearance: none;
		margin-left: 25px;
		font-size: 14px;
	}

	.username-icon,
	.pass-icon {
		margin-left: 12px;
	}

	.username-icon img,
	.pass-icon img {
		display: block;
		width: 20px;
		height: 22px;
	}

	.form-vcode {
		display: flex;
		align-items: center;
		margin-top: 16px;
	}

	.vcode_cont {
		width: 168px;
		height: 100%;
		margin-left: 56px;
		box-shadow: 0px 1px 0px 0px #cccccc;
		display: flex;
	}

	input::-webkit-input-placeholder {
		color: #cccccc;
	}

	input::-moz-input-placeholder {
		color: #cccccc;
	}

	input:-ms-input-placeholder {
		color: #cccccc;
	}

	.form-vcode #vcode {
		width: 100%;
		border: none;
		outline: none;
		white-space: nowrap;
		appearance: none;
		-moz-appearance: none;
		-webkit-appearance: none;
		margin-left: 8px;
		align-items: center;
		font-size: 14px;
	}

	.vcode-img-cont {
		width: 76px;
		height: 100%;
		margin-left: 8px;
	}

	.vcode-img-cont .vcode-img {
		display: block;
		width: 100%;
		height: 100%;
		cursor: pointer;
	}

	.form-vcode .refresh {
		font-family: "Microsoft YaHei","微软雅黑","Microsoft JhengHei","华文细黑",STHeiti,MingLiu,'Avenir', Helvetica, Arial, sans-serif;
		font-size: 14px;
		color: #1b7bf2;
		margin-left: 15px;
		cursor: pointer;
	}

	.form-remember-pass {
		margin-top: 24px;
		display: flex;
		align-items: center;
	}

	.remember-pass-check {
		margin: 0 0 0 56px;
	}

	.remember-pass-label {
		font-family: "Microsoft YaHei","微软雅黑","Microsoft JhengHei","华文细黑",STHeiti,MingLiu,'Avenir', Helvetica, Arial, sans-serif;
		font-size: 14px;
		color: #888888;
		margin-left: 8px;
	}

	.form-login-btn {
		width: 296px;
		height: 40px;
		margin-left: 56px;
		margin-top: 25px;
		background: -webkit-linear-gradient(left, #96765a, #7b5e44);
		background: -o-linear-gradient(right, #96765a, #7b5e44);
		background: -moz-linear-gradient(right, #96765a, #7b5e44);
		background: linear-gradient(to right, #96765a, #7b5e44);
		border-radius: 20px;
		color: #fff;
		text-align: center;
		line-height: 40px;
		font-family: PingFang-SC-Regular;
		font-size: 16px;
		cursor: pointer;
	}

	.copyright-msg {
		position: fixed;
		width: 200%;
		font-size: 14px;
		color: #7e6b5a;
		font-family: "Microsoft YaHei","微软雅黑","Microsoft JhengHei","华文细黑",STHeiti,MingLiu,'Avenir', Helvetica, Arial, sans-serif;
		bottom: 57px;
		text-align: center;
		z-index: 1000;
	}

	/* ******************************************************************大屏 */
	@media screen and (min-width: 1200px) {
		.login-logo {
			width: 99px;
			height: 99px;
			position: absolute;
			left: 31px;
			top: -39px;
		}

		.login-form {
			width: 844px;
			height: 480px;
			border-radius: 8px;
		}

		.login-left {
			width: 50%;
			height: 100%;
		}

		.login-right {
			width: 50%;
			height: 100%;
		}
	}

	.vcode {
		width: 120px;
	}

	/* ***************************************************************小屏 */
	@media screen and (max-width: 1199px) {
		.login-form {
			width: 412px;
			height: 500px;
		}

		.login-left {
			display: none;
		}

		.login-right {
			width: 100%;
			height: 100%;
		}

		.login-logo {
			width: 99px;
			height: 99px;
			position: absolute;
			left: 0;
			right: 0;
			margin-left: auto;
			margin-right: auto;
			top: -123px;
		}
	}
</style>
